<template>
  <div class="admin-layout">
    <!-- 左侧导航菜单 -->
    <aside class="side-menu">
      <!-- 简单Logo -->
      <div class="logo">Bit Event</div>

      <!-- 基础导航菜单 -->
      <nav>
        <ul>
          <li v-for="menu in menuList" :key="menu.path" :class="{ active: isActive(menu.path) }">
            <a 
              v-if="!menu.isLogout"
              :href="menu.path"
              @click.prevent="navigateTo(menu.path)"
            >
              {{ menu.name }}
              <span v-if="menu.mark" class="mark">{{ menu.mark }}</span>
            </a>
            <a v-else @click="handleLogout">
              {{ menu.name }}
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 右侧内容区域 -->
    <div class="content-container">
      <!-- 简单顶部栏 -->
      <header class="simple-header">
        <h1>{{ currentTitle || '管理系统' }}</h1>
      </header>

      <!-- 内容区域 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute} from 'vue-router'
import { ref ,watch} from 'vue'

export default {
  name: 'AdminLayout',
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    // 当前页面标题
    const currentTitle = ref('管理系统')

    // 导航菜单数据
    const menuList = [
      { path: '/dashboard', name: '仪表盘', mark: '首页' },
      { path: '/events/list', name: '活动列表', mark: '列表' },
      { path: '/events/create', name: '创建活动', mark: '新增' },
      { path: '/events/categories', name: '活动分类', mark: '分类' },
      { path: '/users/list', name: '用户管理', mark: '管理' },
      { path: '', name: '退出登录', isLogout: true }
    ]
    
    // 导航到指定路径
    const navigateTo = (path) => {
      router.push(path)
    }
    
    // 判断菜单是否处于激活状态
    const isActive = (path) => {
      return route.path === path || 
             (path !== '/' && route.path.startsWith(path))
    }
    
    // 监听路由变化，更新页面标题
    watch(() => route.meta.title, (newTitle) => {
      if (newTitle) {
        currentTitle.value = newTitle.replace(' - Bit Event', '')
      }
    }, { immediate: true })
    
    // 退出登录
    const handleLogout = () => {
      // 清除token
      localStorage.removeItem('token')
      // 跳转到登录页
      router.push('/login')
    }
    
    return {
      menuList,
      navigateTo,
      isActive,
      handleLogout,
      currentTitle
    }
  }
}
</script>

<style>
/* 全局样式重置，确保整个应用能撑满屏幕 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
  width: 100%;
    margin: 0;
  padding: 0;
}

/* 基础布局 */
.admin-layout {
  display: flex;
  width: 100vw;
  height: 100%;
}

/* 左侧菜单 */
.side-menu {
  width: 200px;
  background-color: #2c3e50;
  color: white;
  padding: 20px 0;
}

.logo {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 20px 0;
  border-bottom: 1px solid #34495e;
  margin-bottom: 20px;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  margin: 0;
}

nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

/* 菜单标记样式 */
.mark {
  background-color: #3498db;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: normal;
}

/* 活动菜单项样式 */
nav li.active a {
  background-color: #34495e;
  border-left: 3px solid #3498db;
}

nav a:hover {
  background-color: #34495e;
}

/* 右侧内容 */
.content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.simple-header {
  padding: 20px;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
}

.simple-header h1 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>